<template>
  <div class="p-6px">
    <el-descriptions title="基础信息" border style="margin-bottom: 10px">
      <el-descriptions-item label="订单号"
        >{{ infoModel?.order_no }}
        <div>[{{ infoModel?.type_text }}]</div></el-descriptions-item
      >
      <el-descriptions-item label="购买人">
        <div style="display: flex">
          <div style="margin-top: 20px">
            <div>昵称: {{ infoModel?.user.nickname }}</div>
            <div>ID: {{ infoModel?.user.id }}</div>
          </div>
          <div style="margin-left: 20px">
            <el-image
              class="rounded-full w-72px h-72px"
              :preview-teleported="true"
              :preview-src-list="infoModel?.user.avatar"
              :src="
                infoModel?.user.avatar != null && infoModel?.user.avatar !== ''
                  ? infoModel?.user.avatar
                  : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
              "
            >
            </el-image>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="实际支付">{{ infoModel?.pay_price }}</el-descriptions-item>
      <el-descriptions-item label="订单状态"
        ><el-tag>{{ infoModel?.status_text }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="支付状态"
        ><el-tag>{{ infoModel?.pay_status_text }}</el-tag></el-descriptions-item
      >

      <el-descriptions-item label="支付方式"
        ><el-tag>{{ infoModel?.pay_way_text }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="支付时间">{{ infoModel?.pay_time }}</el-descriptions-item>
      <el-descriptions-item label="下单时间">{{ infoModel?.create_time }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="收货地址" border style="margin-bottom: 10px">
      <el-descriptions-item label="收货人">{{ infoModel?.address.user_name }}</el-descriptions-item>
      <el-descriptions-item label="收货人手机号">{{ infoModel?.address.phone }}</el-descriptions-item>
      <el-descriptions-item label="收货地址邮编">{{ infoModel?.address.post_code }}</el-descriptions-item>
      <el-descriptions-item label="收货地址">
        <div>
          {{ infoModel?.address?.province }}/ {{ infoModel?.address.city }}/{{ infoModel?.address?.county }}/{{
            infoModel?.address?.street
          }}
          {{ infoModel?.address?.detail }}
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <div style="display: flex; flex-wrap: wrap">
      <a style="cursor: pointer; margin: 10px" type="primary" @click="deliver()">发货</a>
    </div>

    <el-table
      :data="infoModel?.detail"
      stripe
      style="width: 100%"
      :editable="true"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" :selectable="canBeSelect" />

      <el-table-column label="发货信息" width="170px" align="left">
        <template #default="scope">
          <div>{{ scope.row.delivery_status == 1 ? "已发货" : "未发货" }}</div>
          <div>{{ scope.row.delivery_time }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="image" label="图片" width="100px" align="center">
        <template #default="scope">
          <el-image
            class="w-72px h-72px"
            :preview-teleported="true"
            :preview-src-list="[scope.row.image]"
            :src="
              scope.row.logo != null && scope.row.logo !== ''
                ? scope.row.logo
                : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            "
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="300px" align="center"> </el-table-column>
      <el-table-column prop="sku_name" label="规格名称" width="120px" align="center"> </el-table-column>
      <el-table-column prop="price" label="金额" width="120px" align="center"> </el-table-column>
      <el-table-column prop="num" label="数量" width="120px" align="center"> </el-table-column>
      <el-table-column prop="coupon_amount" label="卡券平摊" width="120px" align="center"> </el-table-column>
      <el-table-column prop="refunded_flag" label="是否退款" width="120px" align="center">
        <template #default="scope">{{ (scope.row.refunded_flag = 1 ? "否" : "是") }}</template>
      </el-table-column>
      <el-table-column prop="refunded_num" label="退款数量" width="120px" align="center"> </el-table-column>
      <el-table-column prop="refunded_price" label="退款金额" align="center"> </el-table-column>
    </el-table>

    <KoiDialog ref="koiDialogRef" title="发货" :width="400" :height="200" @koiConfirm="handleConfirm">
      <template #content>
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" status-icon>
          <el-form-item label="配送方式" prop="title">
            <el-radio-group v-model="form.type" class="ml-4">
              <el-radio value="1">物流配送</el-radio>
              <el-radio value="2">无需快递</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="form.type == 1">
            <el-form-item label="物流公司" prop="level">
              <el-select v-model="form.express_id" placeholder="请选择物流公司" style="width: 500px">
                <el-option v-for="(item, index) in express" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号" prop="title">
              <el-input v-model="form.delivery_no" placeholder="请输入快递单号" clearable />
            </el-form-item>
          </div>
        </el-form>
      </template>
    </KoiDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getAllExpress } from "@/api/freight/express/index";
import { koiMsgError, koiMsgWarning, koiNoticeError, koiNoticeSuccess } from "@/utils/koi";
import { orderDelivery, read } from "@/api/order/order";

onMounted(() => {
  getAllExpress().then((r: any) => {
    express.value = r.data;
  });
});

interface IDrawerProps {
  info: any;
}

const props = withDefaults(defineProps<IDrawerProps>(), {
  info: {}
});

const infoModel = ref(props.info);

const ids = ref([]); // 选中数组
/** 是否多选 */
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: any) => item.id);
};
// form表单Ref
const formRef = ref<any>();
const deliver = () => {
  if (ids.value.length <= 0) {
    koiMsgWarning("请先选择要发货的商品");
    return;
  }
  resetForm();
  koiDialogRef.value.koiOpen();
};
const handleConfirm = () => {
  if (!formRef.value) return;
  (formRef.value as any).validate(async (valid: any) => {
    if (valid) {
      try {
        let delivery_code = "";
        let delivery_name = "";
        if (form.value.type == "1") {
          const cur = express.value.find((r: any) => r.id == form.value.express_id);
          if (!cur) {
            koiMsgWarning("请选择发货的物流公司");
            return;
          }
          delivery_code = cur.code;
          delivery_name = cur.name;
        }
        form.value.delivery_code = delivery_code;
        form.value.delivery_name = delivery_name;
        form.value.order_detail_ids = ids.value;
        form.value.order_id = props.info.id;
        form.value.order_no = props.info.order_no;
        await orderDelivery(form.value);
        koiNoticeSuccess("操作成功");
        koiDialogRef.value.koiClose();
        deliverInfo(props.info.id);
      } catch (error) {
        console.log(error);
        koiNoticeError("操作失败，请刷新重试");
      }
    } else {
      koiMsgError("验证失败，请检查填写内容");
    }
  });
};
// form表单
let form = ref<any>({
  delivery_code: "",
  delivery_no: "",
  order_detail_ids: [],
  order_id: "",
  type: "1"
});

/** 清空表单数据 */
const resetForm = () => {
  form.value = {
    delivery_code: "",
    delivery_no: "",
    order_detail_ids: [],
    order_id: "",
    type: "1"
  };
};

/** 表单规则 */
const rules = reactive({});
const express = ref<any>([]);
const koiDialogRef = ref();

const canBeSelect = (row: any) => {
  return row.delivery_status == 0;
};

const deliverInfo = (id: any) => {
  read(id).then(res => {
    infoModel.value = res.data;
  });
};
</script>

<style lang="scss" scoped></style>
